<template>
  <!--  产品中心页面-->
  <div>
    <div class="caseBox quillBox">
      <!--富文本编辑器-->
      <quill-editor class='editor ql-editor'
                    ref="myQuillEditor"
                    v-model="form3.richText"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"/>
    </div>
    <upload-rich-img v-show="false" :callback="'richImg'" @richImg="richImg" class="avatar-upload_img"
                     v-model="form3.richPic" ref="uploadPics"></upload-rich-img>
  </div>

</template>
<script>
  import {lineHeightStyle} from '@/utils/lineHeight'
  import constUrl from '@/services/env'
  import UploadRichImg from '@/components/upload-richImg'
  import {
    getWebsiteAdd,
    getWebsiteUpdate,
  } from '@/services/model/website'
  import Format from '@/utils/format'
  import {quillEditor, Quill} from 'vue-quill-editor'

  const titleConfig = [
    {Choice: '.ql-insertMetric', title: '跳转配置'},
    {Choice: '.ql-bold', title: '加粗'},
    {Choice: '.ql-italic', title: '斜体'},
    {Choice: '.ql-underline', title: '下划线'},
    {Choice: '.ql-header', title: '段落格式'},
    {Choice: '.ql-strike', title: '删除线'},
    {Choice: '.ql-blockquote', title: '块引用'},
    {Choice: '.ql-code', title: '插入代码'},
    {Choice: '.ql-code-block', title: '插入代码段'},
    {Choice: '.ql-font', title: '字体'},
    {Choice: '.ql-size', title: '字体大小'},
    {Choice: '.ql-list[value="ordered"]', title: '编号列表'},
    {Choice: '.ql-list[value="bullet"]', title: '项目列表'},
    {Choice: '.ql-direction', title: '文本方向'},
    {Choice: '.ql-header[value="1"]', title: 'h1'},
    {Choice: '.ql-header[value="2"]', title: 'h2'},
    {Choice: '.ql-align', title: '对齐方式'},
    {Choice: '.ql-color', title: '字体颜色'},
    {Choice: '.ql-background', title: '背景颜色'},
    {Choice: '.ql-image', title: '图像'},
    {Choice: '.ql-video', title: '视频'},
    {Choice: '.ql-link', title: '添加链接'},
    {Choice: '.ql-formula', title: '插入公式'},
    {Choice: '.ql-clean', title: '清除字体格式'},
    {Choice: '.ql-script[value="sub"]', title: '下标'},
    {Choice: '.ql-script[value="super"]', title: '上标'},
    {Choice: '.ql-indent[value="-1"]', title: '向左缩进'},
    {Choice: '.ql-indent[value="+1"]', title: '向右缩进'},
    {Choice: '.ql-header .ql-picker-label', title: '标题大小'},
    {Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一'},
    {Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二'},
    {Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三'},
    {Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四'},
    {Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五'},
    {Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六'},
    {Choice: '.ql-header .ql-picker-item:last-child', title: '标准'},
    {Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号'},
    {Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号'},
    {Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号'},
    {Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准'},
    {Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐'},
    {Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐'},
    {Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐'},
    {Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐'}
  ]
  // / toolbar标题
  const toolbarOptions = [

    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
    [{header: 1}, {header: 2}], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{script: "sub"}, {script: "super"}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{indent: "-1"}, {indent: "+1"}], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{direction: "rtl"}], // 文本方向-----[{'direction': 'rtl'}]
    [{size: ['10px', '12px', false, '16px', '18px', '20px', '30px', '32px']}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{color: []}, {background: []}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']}], // 字体种类-----[{ font: [] }]
    [{align: []}], // 对齐方式-----[{ align: [] }]
    ["clean"], // 清除文本格式-----['clean']
    ["image", "video"],// 链接、图片、视频-----['link', 'image', 'video']
    [{lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5']}], //自定义行高
  ];

  //自定义字体类型
  let Size = Quill.import('attributors/style/size')
  Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
  Quill.register(Size, true)
  // 自定义字体类型
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
  var Font = Quill.import('formats/font')
  Font.whitelist = fonts
  Quill.register(Font, true)
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import ImageResize from "quill-image-resize-module"; // 引用
  import {ImageDrop} from "quill-image-drop-module";

  Quill.register("modules/imageDrop", ImageDrop);
  Quill.register("modules/imageResize", ImageResize); // 注册
  // form表单校验规则
  export default {
    components: {
      quillEditor,
      UploadRichImg
    },
    data() {
      return {
        form: {
          page: 1,
          pageSize: 10,
        },
        constUrl,
        //是否启用
        parentName: '',
        monitorSortList: [],
        //菜单类型
        parentId: '',
        EnumWebTypeList: [],
        dataList: [],
        //上传图片
        dialogVisible: false,
        disabled: false,
        // 富文本编辑器
        content: null,
        dividerName: '第一级菜单',
        editorOption: {
          theme: "snow",
          placeholder: "请输入正文",
          modules: {
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: "black",
                border: "none",
                color: "white"
              },
              modules: ["Resize", "DisplaySize", "Toolbar"]
            },
            //  富文本编辑器配置
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.avatar-upload_img input').click()
                  } else {

                    this.quill.format('image', false)
                  }
                },
                lineheight: (value) => {
                  if (value) {
                    let quill = this.$refs.myQuillEditor.quill;
                    quill.format("lineHeight", value)
                  }
                }

              }
            }
          }
        },
        tableText: [{
          name: '第一级菜单',
          code: 1,
          parentId: ''
        },],
        menuBox: 1,
        form3: {richText: ''},
        // 接口获取 打开方式
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      }
    },
    computed: {
      // 弹窗的title
      dialogTitle() {
        return this.form3.id ? '编辑产品' : '新增产品'
      },
    },
    methods: {
      //清空富文本
      changeRichText(form3) {
        this.form3.richText = ''
        this.form3 = form3
      },
      //失去焦点事件
      onEditorBlur(quill) {
      }
      ,
      //获得焦点事件
      onEditorFocus(quill) {
      }
      ,
      // 准备富文本编辑器
      onEditorReady(quill) {
        Quill.register({'formats/lineHeight': lineHeightStyle}, true)
      },
      richImg(val) {
        let quill = this.$refs.myQuillEditor.quill
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片 dt.url为服务器返回的图片地址
        quill.insertEmbed(length, 'image', val)

        // 调整光标到最后
        quill.setSelection(length + 1)
      },
      initTitle() {
        for (let item of titleConfig) {
          let tip = document.querySelector('.quill-editor ' + item.Choice)
          if (!tip) continue
          tip.setAttribute('title', item.title)
        }
      },
      // 新增编辑提交数据
      async submitData(data, name) {
        for (let i in data) {
          this.form3[i] = data[i]
        }
        // 根据ID判断使用新增还是编辑
        const AJAX_ACTION = this.form3.id ? getWebsiteUpdate : getWebsiteAdd
        await AJAX_ACTION(this.form3)
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.form3.id ? '编辑成功' : '添加成功'
        })
        this.$emit("submitClose");

      },
    },
    mounted() {
      this.initTitle()
    },
  }
</script>
<style lang="less">

</style>

<style scoped lang="less">
  .page {
    height: 100%;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .caseBox {
    width: 100%;
    text-align: center;
    margin-top: 2vh;
    height: 80vh !important;

    .quill-editor {

    }
  }

  /*修改富文本编辑器样式*/
  /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
    height: 88%;
    overflow-y: auto;
  }

  /*修改表单样式*/
  /deep/ .demo-drawer__content {

    /deep/ .el-form {
      width: 80%;
      margin: auto;
      overflow-y: auto;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 50px;
      text-align: left
    }

    /deep/ .el-textarea, /deep/ .el-textarea__inner {
      height: 30vh;
    }
  }


</style>
